import React from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { useLocation, useNavigate } from 'react-router-dom'
import style from './tabbar.module.css'

function Tabbar() {
    const tabs = [
        {
            key: 'home',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: 'circle',
            title: '病友圈',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: 'kepu',
            title: '科普',
            icon: () =>
                <MessageFill />,
            badge: '99+',
        },
        {
            key: 'my',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    const nav = useNavigate()
    const location = useLocation()
    const changeTab = (key) => {
        nav(`/${key}`)
    }
    
    // 从路径中提取当前激活的tab key
    const getActiveKey = () => {
        const path = location.pathname
        if (path === '/') return 'home'
        return path.substring(1) // 移除开头的斜杠
    }
    
    return (
        <div className={style.tabbar}>
            <TabBar onChange={changeTab} activeKey={getActiveKey()}>
                {tabs.map(item => (
                    <TabBar.Item style={{height:'60px'}} key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}

export default Tabbar
